<template>
	<view class="content-header">
		<view class="header" v-if="orderInfo!=null">
			<view class="status">
				<view class="flex-row flex-content-between status-txt">
					<view>订单状态</view>
					<view>{{getStatusTitle(orderInfo.status)}}</view>
				</view>
			</view>
			<view class="order">
				<view class="order-top flex-column">
					<view class="ones-order flex-row flex-content-between" v-for="(item,index) in orderInfo.orderitem">
						<view class="flex-row">
							<image class="goods-img" :src="$utils.cdnImg(item.image)" mode="scaleToFill"></image>
							<view class="flex-column goods-txt">
								<view>{{item.title}}</view>
								<view class="flex-row tags">
									<view v-for="tag in item.tags">{{tag.title}}</view>
								</view>
								<view>￥{{item.price}}</view>
							</view>
						</view>
						<view class="flex-column-reverse">
							<view class="number-goods">x{{item.num}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="detal">
				<view class="detal-top flex-column">
					<view class="detal-up">
						<view class="flex-row flex-content-between detal-up-one">
							<view class="detal-1">商品总价</view>
							<view class="detal-2">￥{{parseFloat(orderInfo.pay_money)+parseFloat(orderInfo.pay_score)}}
							</view>
						</view>
						<view class="flex-row flex-content-between detal-up-one">
							<view class="detal-1">配送方式</view>
							<view class="detal-3">物流配送</view>
						</view>
						<view class="flex-row flex-content-between detal-up-one">
							<view class="detal-1">运费</view>
							<view class="detal-3">￥{{orderInfo.freight}}</view>
						</view>
					</view>
					<view class="flex-column detal-up1">
						<view class="flex-row flex-content-between detal-dow">
							<view class="detal-4">订单编号</view>
							<view class="detal-3">{{orderInfo.order_num}}</view>
						</view>
						<view class="flex-row flex-content-between detal-dow">
							<view class="detal-4">下单时间</view>
							<view class="detal-3">{{orderInfo.createtime}}</view>
						</view>
						<view class="flex-row flex-content-between detal-dow" v-if="orderInfo.pay_time">
							<view class="detal-4">付款时间</view>
							<view class="detal-3">{{orderInfo.pay_time}}</view>
						</view>
					</view>
					<view class="flex-row flex-content-end btn-top">
						<view v-for="btn in getBtnList(orderInfo.status)">
							<view class="wuse" v-if="btn==`refund`" @tap="refund(`退款`)">
								退款
							</view>
							<view class="wuse" v-if="btn==`cancellation`" @tap="quxiao">
								取消
							</view>
							<view class="youse" v-if="btn==`payment`" @tap="payOrder">
								支付订单
							</view>
							<view class="youse" v-if="btn==`confirm_receipt`" @tap="quern">
								确认收货
							</view>
							<view class="youse" v-if="btn==`wuliu`" @tap="showWuliu">
								查看物流
							</view>
							<view class="youse" v-if="btn==`comment`" @tap="pingjia">
								评论
							</view>
							<view class="wuse" v-if="btn==`del`" @tap="delOrder">
								删除
							</view>
							<view class="wuse" v-if="btn==`sales`" @tap="refund(`售后`)">
								售后
							</view>
						</view>
						<!-- <view class="youse">去评价</view> -->
						<!-- 	<view v-for="btn in getBtnList(orderInfo.status)">
							<view class="youse" v-if="btn==`repay`" @tap="repay">再次购买</view>
							<view class="wuse" v-if="btn==`tuikuan`">退款</view>
							<view class="youse" v-if="btn==`pingljia`">去评价</view>
							<view class="youse" v-if="btn==`takeover`">确认收货</view>
							<view class="youse" v-if="btn==`pay`">去支付</view>
							<view class="wuse" v-if="btn==`cancellation`">取消订单</view>
							<view class="youse" v-if="btn==`wuliu`">查看物流</view>
						</view> -->
						<!-- <view>立即评价</view> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import order from '../../sdk/store/modules/order';
	export default {
		data() {
			return {
				orderInfo: null,
				order_num: "",
			}
		},
		computed: {
			statusList() {
				return this.$store.state.order.statusList
			},
			statusList() {
				return this.$store.state.order.statusList
			}
		},
		onLoad(opt) {
			if (opt.order_num) {
				this.order_num = opt.order_num
			}
			this.getOrderInfo();
			console.log(this.statusList);
		},
		methods: {
			//再次购买
			repay() {
				let item = this.orderInfo
				console.log(item);
				let info = [];
				item.order_goods.forEach(it => {
					info.push({
						goods_id: it.goods_id,
						num: it.num
					})
				})
				// console.log(info);
				let url = "/pages/order/create_order?channel_type=1&info=" + encodeURIComponent(JSON.stringify(info))
				uni.navigateTo({
					url: url
				})

			},
			//获取按钮
			getBtnList(status) {
				if (this.statusList[status]) {
					return this.statusList[status].buttons
				} else {
					return [];
				}
			},
			getStatusTitle(status) {
				let statusList = this.statusList
				// console.log(this.statusList);
				if (statusList[status]) {
					return statusList[status].name
				}
				return ""
			},
			//获取订单详情
			getOrderInfo() {
				let that = this;
				let order_num = this.order_num;
				if (!order_num) {
					return
				}
				this.$api.getOrderInfo({
					order_num: order_num
				}).then(res => {
					console.log(res);
					that.orderInfo = res;
				})
			},
			//退款
			refund(title){
				uni.navigateTo({
					url: '/pages/order/refund_order?title='+title+"&order_num="+this.orderInfo.order_num
				})
			},
			//去支付
			payOrder(){
				uni.navigateTo({
					url: '/pages/order/pay_order?order_num='+this.orderInfo.order_num
				})
			},
			//取消订单
			quxiao(){
				let that = this;
				uni.showModal({
					title:"提示",
					content:"确认取消订单吗?",
					success(config) {
						if(config.confirm){
							that.$api.cancellationOrder({
								order_num:that.orderInfo.order_num
							}).then(res=>{
								that.$utils.showMessage("取消成功",()=>{
									that.$store.dispatch("getOrderList")
									that.$store.dispatch("getOrderStatus")
								})
							})
						}
					}
				})
			},
			//确认订单
			quern(){
				let that = this
				uni.showModal({
					title:"提示",
					content:"确认已经收到货!",
					success(conig) {
						if(conig.confirm){
							that.$api.confimOrder({
								order_num:that.orderInfo.order_num
							}).then(res=>{
								that.$utils.showMessage("收货成功",()=>{
									that.$store.dispatch("getOrderList")
									that.$store.dispatch("getOrderStatus")
								})
							})
						}
					}
				})
			},
			//查看物流
			showWuliu(){
				uni.navigateTo({
					url: '/pages/order/order_wuliu?order_num='+this.orderInfo.order_num
				})
			},
			//去评论
			pingjia(){
				uni.navigateTo({
					url: '/pages/goods/evaluate?order_num='+this.orderInfo.order_num
				})
			},
			//删除订单
			delOrder(){
				let that = this;
				uni.showModal({
					title:"提示",
					content:"确定删除订单吗?",
					success(config) {
						if(config.confirm){
							that.$api.delOrder({
								order_num:that.orderInfo.order_num
							}).then(res=>{
								that.$store.dispatch("getOrderList")
								that.$store.dispatch("getOrderStatus")
								that.$utils.showMessage("删除成功",()=>{
									uni.navigateBack()
									
								})
							})
						}
					}
				})
			}
		}
	}
</script>


<style lang="scss">
	.wuse {
		width: 170rpx;
		height: 60rpx;
		background: #EFEFEF;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		opacity: 1;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		text-align: center;
		line-height: 60rpx;
		margin-left: 20rpx;
	}

	.youse {
		width: 170rpx;
		height: 60rpx;
		background: linear-gradient(90deg, $default-button-color 0%, $default-button-end-color 100%);
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		opacity: 1;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: $default-button-foncolor;
		text-align: center;
		line-height: 60rpx;
	}

	.btn-top {
		margin-top: 30rpx;

		>view {
			margin-left: 20rpx;
		}

		// >view:nth-child(1){
		// 	width: 170rpx;
		// 	height: 60rpx;
		// 	background: #FFFFFF;
		// 	border-radius: 30rpx 30rpx 30rpx 30rpx;
		// 	opacity: 1;
		// 	border: 1px solid $default-button-color;
		// 	font-size: 26rpx;
		// 	font-family: PingFang SC-Regular, PingFang SC;
		// 	font-weight: 400;
		// 	color: $default-button-color;
		// 	text-align: center;
		// 	line-height: 60rpx;
		// }
		// >view:nth-child(2){
		// 	width: 170rpx;
		// 	height: 60rpx;
		// 	background: linear-gradient(90deg, $default-button-color 0%, $default-button-end-color 100%);
		// 	border-radius: 40rpx 40rpx 40rpx 40rpx;
		// 	opacity: 1;
		// 	font-size: 26rpx;
		// 	font-family: PingFang SC-Regular, PingFang SC;
		// 	font-weight: 400;
		// 	color: $default-button-foncolor;
		// 	text-align: center;
		// 	line-height: 60rpx;
		// }
	}

	.detal-dow {
		margin-top: 40rpx;
	}

	.detal-up-one {
		margin-bottom: 40rpx;
	}

	.detal-4 {
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
	}

	.detal-3 {
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.detal-2 {
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.detal-1 {
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;

	}

	.detal-up1 {
		width: 630rpx;
		// height: 270rpx;
		border-bottom: 1rpx solid #EFEFEF;
		padding-bottom: 40rpx;
	}

	.detal-up {
		width: 630rpx;
		// height: 270rpx;
		border-bottom: 1rpx solid #EFEFEF;
	}

	.detal-top {
		margin-left: 30rpx;
		padding-top: 30rpx;
		margin-right: 30rpx;
	}

	.detal {
		width: 690rpx;
		height: 690rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		opacity: 1;
		margin-top: 20rpx;
	}

	.number-goods {
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.tags {
		margin-top: 10rpx;

		>view {
			height: 38rpx;
			background: #FFFFFF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			opacity: 1;
			border: 1px solid #FF5000;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FF5000;
			margin-right: 10rpx;
			padding-left: 10rpx;
			padding-right: 10rpx;
		}
	}

	.goods-txt {
		margin-left: 20rpx;

		>view:nth-child(1) {
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
		}

		>view:nth-child(3) {
			font-size: 30rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-top: 40rpx;
		}

	}

	.goods-img {
		width: 172rpx;
		height: 172rpx;
	}

	.ones-order {
		margin-bottom: 20rpx;
	}

	.order-top {
		padding-top: 30rpx;
		margin-left: 22rpx;
		margin-right: 30rpx;
		padding-bottom: 10rpx;
	}

	.order {
		width: 690rpx;
		// height: 232rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		opacity: 1;
		margin-top: 20rpx;
	}

	.status-txt {
		padding-top: 30rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;

		>view:nth-child(1) {
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		>view:nth-child(2) {
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #FF5000;
		}
	}

	.status {
		width: 690rpx;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		opacity: 1;
		margin-top: 20rpx;
	}

	.header {
		width: 690rpx;
		margin-left: 30rpx;
	}
</style>